CSS Float
Floating is often used to push an image to one side or another, while having the text of a paragraph wrap around it. This type of usage is often referred to as text wrapping and resembles what you might see in many magazines that have articles which wrap around images of various shapes and sizes.
Float Image
Wrapping text around an image is easy when using the CSS Float attribute. You have a choice to either float the picture to the left or to the right and the rest is done for you. Below is an example of an image that is floated to different sides of a paragraph.
CSS Code:
img.floatLeft {
float: left;
margin: 4px;
}
img.floatRight {
float: right;
margin: 4px;
}
HTML Code:
<body>
<img src="sunset.gif" class="floatLeft">
<p>The images are contained with...</p>
<img src="sunset.gif" class="floatRight">
<p>This second paragraph has an...</p>
</body>
Display:
The images are contained within the paragraph tag. The image has floated to the left, and also to the right because we have used both types of image floating in this example. Notice how the text wraps around the images quite nicely. The images are contained within the paragraph tag. The image has floated to the left, and also to the right because we have used both types of image floating in this example. Notice how the text wraps around the images quite nicely.
This second paragraph has an image that is floated to the right. It should be noted that a margin should be added to images so
that the text does not get too close to the image. There should always be a few pixels between words and borders, images, and other content.
This second paragraph has an image that is floated to the right. It should be noted that a margin should be added to images so
that the text does not get too close to the image. There should always be a few pixels between words and borders, images, and other content.
Floating Multiple Images
If you were to simply float three images to the right, they would appear alongside one another. If you wish to have the next image start below the end of the previous image, then use the CSS Clear attribute.
CSS Code:
img.floatRightClear {
float: right;
clear: right;
margin: 4px;
}
HTML Code:
<body>
<img src="sunset.gif" class="floatRightClear">
<img src="sunset.gif" class="floatRightClear">
<p>The images are appearing...</p>
<p>If we had specified...</p>
<p>The number of paragraphs...</p>
</body>
Display:
The images are appearing below one another because the CSS clear attribute was used with the value of "right". This forces all right floating items to appear below any previous right floating items.
If we had specified clear:left in our CSS code, then
there would be no effect on the images, and they would appear in their default pattern, next to each other, all on one line.
The number of paragraphs, and the size of the paragraphs, will not effect how these images will appear.
Found Something Wrong in this Lesson?Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time! | 
